<template>
    <div class="my-header">
        <h2>
            <slot></slot>
        </h2>
        <input type="text" class="ipt" placeholder="请输入内容" :value="modelValue"
            @input="$emit('update:modelValue',$event.target.value)" @keydown.enter="$emit('send')">
    </div>
</template>

<script>
export default {
    props: {
        modelValue: {
            type: String
        }
    },
    setup(props) {



    }

}
</script>

<style lang="scss" scoped>
.my-header {
    width: 100%;
    height: 60px;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;

    h2 {
        color: #fff;
        font-size: 36px;
    }

    .ipt {
        margin-left: 50px;
        width: 400px;
        height: 35px;
        border-radius: 10px;
        border: 0;
        padding-left: 16px;
        box-sizing: border-box;
    }

}
</style>
